<template>
    <!-- 每一个组件外层包裹容器 -->
    <div 
        class="edit-shape-box" 
        :style="{
            transform:`scale(${dataviewState.editCanvas.scale})`,
        }"
    >
        <slot />
        <!-- 锚点 -->
        <template v-if="!props.hiddenPoint">
            <!-- 锚点拖拽事件处理组件放大缩小 -->
            <div 
                :class="`shape-point ${point}`" 
                v-for="(point, index) in select ? pointList : []" 
                :key="index"
                :style="usePointStyle(point, index, item.attr, cursorResize)"
                @mousedown="useMousePointHandle($event,point,item.attr)"
            ></div>
        </template>
        <!-- 激活样式 -->
        <div class="shape-modal" :style="{ ...useSizeStyle(item.attr) }">
            <div class="shape-modal-select" :class="{ active: select }"></div>
            <div class="shape-modal-change" :class="{ selectActive: select, hoverActive: hover }"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useDataViewStore } from '@/stores/dataview';
import { storeToRefs } from 'pinia';
import { usePointStyle, useSizeStyle } from '../hooks/useStyle';
import { computed } from 'vue';
import { useMousePointHandle } from '../hooks/useDrag';

const props = withDefaults(defineProps<{
    item: any,
    hiddenPoint?: boolean, // 隐藏锚点
}>(), {
    hiddenPoint: false
})

// 锚点
const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb']
// 光标朝向
const cursorResize = ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']
const themeColor = 'black'

const dataviewStore = useDataViewStore();
const { dataviewState } = storeToRefs(dataviewStore);


const select = computed(() => {
    const id = props.item.id
    if (props.item.status.lock) return false //锁定不处理
    return dataviewStore.getTargetChart.selectId.find((i: any) => i == id)
})

const hover = computed(() => {
    // 处理拖拽情况

    if (props.item.status.lock) return false //锁定不处理
    return props.item.id === dataviewStore.getTargetChart.hoverId
})
</script>

<style lang="scss" scoped>
.edit-shape-box {
    position: absolute;
}

/* 锚点 */
.shape-point {
    z-index: 1;
    position: absolute;
    width: 7px;
    height: 7px;
    border: 3px solid v-bind('themeColor');
    border-radius: 5px;
    background-color: #fff;
    transform: translate(-40%, -30%);

    &.t {
        width: 30px;
        transform: translate(-50%, -50%);
    }

    &.b {
        width: 30px;
        transform: translate(-50%, -30%);
    }

    &.l,
    &.r {
        height: 30px;
    }

    &.r {
        transform: translate(-20%, -50%);
    }

    &.l {
        transform: translate(-45%, -50%);
    }

    &.rt,
    &.rb {
        transform: translate(-30%, -30%);
    }
}

/* 选中 */
.shape-modal {
    position: absolute;
    top: -1px;
    left: -1px;

    // 大小沾满
    .shape-modal-select,
    .shape-modal-change {
        position: absolute;
        width: 101%;
        height: 101%;
        border-radius: 4px;
    }

    .shape-modal-select {
        opacity: 0.1;
        top: 2px;
        left: 2px;

        &.active {
            background-color: v-bind('themeColor');
        }
    }

    .shape-modal-change {
        border: 2px solid rgba(0, 0, 0, 0);

        &.selectActive,
        &.hoverActive {
            border-color: v-bind('themeColor');
            border-width: 2px;
        }

        &.hoverActive {
            border-style: dotted;
        }

        &.selectActive {
            border-style: solid;
        }
    }
}
</style>